<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalidations</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="about_invalidations.css">
</head>
<body>
  <h1>Invalidations Debug Information</h1>
  <div id="invalidations-info">
    <div id="states" class="section">
      <span class="lead">Invalidation service state:</span>
      <span id="invalidations-state"></span>
    </div>
    <div>
      <span class="lead">Registered InvalidationHandlers:</span>
      <span id="registered-handlers"></span>
    </div>
    <div id="objectsid-table-div" class="section">
      <span class="lead">Registered objectsIds for invalidations:</span>
      <table id="objectsid-table-container">
      <!-- 'objectsidtable' can't have dashes in the name
            as jstemplate can't deal with them-->
        <thead>
          <tr class="header">
            <th>Registrar</th>
            <th>Source</th>
            <th>Name</th>
            <th>Total Count</th>
            <th>Session Count</th>
            <th>Version</th>
            <th>Time</th>
            <th>Last Payload</th>
          </tr>
        </thead>
        <tbody>
          <tr jsselect="objectsidtable" jsvalues="class:$this.type">
            <td jscontent="registrar" width=5%></td>
            <td jscontent="source" width=5%></td>
            <td jscontent="name" width=20%></td>
            <td jscontent="totalCount" width=5%></td>
            <td jscontent="sessionCount" width=5%></td>
            <td jscontent="version" width=10%></td>
            <td jscontent="time" width=20%></td>
            <td jscontent="payload" width=30%></td>
         </tr>
       </tbody>
     </table>
    </div>
    <div class="section">
      <span class="lead">Invalidations Log:</span>
      <textarea
        id="invalidations-log" rows="10" cols="120"readonly></textarea>
    </div>
    <div class="section">
      <span class="lead">Detailed Internal Status:
        <button id="request-detailed-status">Refresh</button>
      </span>
      <textarea id="internal-display" rows="10" cols="120" readonly></textarea>
    </div>
  </div>
  <script type="module" src="about_invalidations.js"></script>
</body>
</html>
